<template>
		<u-modal :show="show" :showConfirmButton="false">
			<view class="slot-content" style="position: relative;">
				<view class="modal-close" @click="handleClose">
					<u-icon name="close" size="28"></u-icon>
				</view>
				<image class="modal-img" src="https://static.wddzq.com/static/shezhigerenxinxichatu.png"></image>
				<view class="modal-title">设置个人信息</view>
				<view class="modal-content">
					设置好个人信息，就可以和小伙伴愉快的玩耍了哦
				</view>
				<view class="modal-header" v-if="showHeader">
					<view class="modal-header-container" @click="handleChooseImage">
						<image :src=" headerImg ? headerImg : '../../../static/logo.png'"></image>
						<view v-if="!headerImg">设置</view>
					</view>
					<u--input :value="nickname" @input="handleNickNameInput" placeholder="点击此处输入用户昵称" fontSize="28" color="#333" :placeholderStyle="{color: '#AAAAAA', fontSize: '28rpx'}" border="none"></u--input>
				</view>
				<view class="modal-sex" v-if="showSex">
					<view class="modal-sex-item mr-108" :data-value="2" @click="handleSexSelect">
						<image src="https://static.wddzq.com/static/xingbie_nv.png"></image>
						<text :class="gender === 2 ? 'active' : ''">我是美女</text>
					</view>
					<view class="modal-sex-item" :data-value="1" @click="handleSexSelect">
						<image src="https://static.wddzq.com/static/xingbie_nan.png"></image>
						<text :class="gender === 1 ? 'active' : ''">我是帅哥</text>
					</view>
				</view>
				<view style="padding: 0;">
					<u-button customStyle="height: 88rpx;border-radius: 44rpx;margin-top: 64rpx;" color="#1c1c1e" :text="showSex ? '开启精彩之旅' : '下一步&nbsp;选择性别'" @click="handleSubmit"></u-button>
				</view>
			</view>
		</u-modal>
</template>

<script>
	import { uploadAfter, getUserInfoDetail, isLogin, to } from '../../../config/utils.js';
	import { updateUserInfo, getUserInfo } from '../../../config/api.js';
	
	export default {
		data() {
			return {
				show: false,
				showHeader: false,
				showSex: false,
				headerImg: '',
				nickname: '',
				gender: '',
				userInfo: {},
			}
		},
		props: {
			refresh: {
				type: Number,
				default: 0
			}
		},
		watch: {
			refresh() {
				if(!isLogin()) return;
				let userInfo = getUserInfoDetail();
				if(!userInfo?.nickname || !userInfo?.picList) {
					this.show = true;
					this.showHeader = true;
					return;
				} else {
					this.nickname = userInfo?.nickname;
					this.headerImg = userInfo?.picList?.split(',')[0] || '';
				}
				
				if(!userInfo?.gender) {
					this.show = true;
					this.showSex = true;
					return;
				}
			}
		},

		mounted(){
			if(isLogin()) {
				let userInfo = getUserInfoDetail();
				this.userInfo = userInfo;
				if(!userInfo?.nickname || !userInfo?.picList) {
					this.show = true;
					this.showHeader = true;
					this.showSex = false;
				}
			}
		},
		methods: {
			handleClose() {
				this.show = false;
				this.showHeader = false;
				this.showSex = false;
			},
			handleNickNameInput(val) {
				this.nickname = val;
			},
			// 性别选择
			handleSexSelect(e) {
				const { value } = e.currentTarget.dataset || {};
				this.gender = value;
			},
			handleChooseImage() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: async function (res) {
						let paths = (res.tempFilePaths || []).map(item => ({ url: item }))
						if(!paths.length) return uni.showToast({
							title: '获取图片失败'
						})
						const fileData = await uploadAfter(paths);
						let fileList = fileData?.filter(item => item.url);
						that.headerImg = fileList[0]?.url || '';
					}
				});
			},
			// 更新用户信息
			async handleSubmit() {
				if(!this.showSex) {
					if(!this.nickname) {
						return uni.showToast({
							title: '请输入昵称',
							icon: 'none'
						})
					}
					
					if(!this.headerImg) {
						return uni.showToast({
							title: '请上传头像',
							icon: 'none'
						})
					}
					
					this.gender = this.userInfo?.gender;
					this.showSex = true;
					this.showHeader = false;
					return;
				}
				if(!this.headerImg) {
					return uni.showToast({
						title: '请上传头像',
						icon: 'none'
					})
				}
				if(!this.nickname) {
					return uni.showToast({
						title: '请输入昵称',
						icon: 'none'
					})
				}
				
				if(!this.gender) {
					return uni.showToast({
						title: '请选择性别',
						icon: 'none'
					})
				}
				
				const [err, data] = await to(updateUserInfo({
					...(this.userInfo || {}),
					nickname: this.nickname,
					picList: this.headerImg || this.userInfo?.picList || '',
					gender: this.gender,
				}))
				if(err) {
					return uni.showToast({
						title: err.msg || '更新失败',
						icon: 'none'
					})
				}
				if(data.success) {
					this.show = false;
					this.showHeader = false;
					this.showSex = false;
					uni.showToast({
						title: '个人信息修改成功'
					})
					const [errUser, userInfoData] = await to(getUserInfo());
					if(errUser) return;
					if(userInfoData.success && userInfoData.data) {
						uni.setStorage({
							key: 'userInfo',
							data: JSON.stringify(userInfoData.data)
						})
					}
					
				} else {
					uni.showToast({
						title: data.msg || '更新失败',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style>

/* 弹窗 */
.modal-close {
	position: absolute;
	top: -60rpx;
	right: -60rpx;
	width: 80rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.modal-img {
	position: absolute;
	top: -180rpx;
	left: -30rpx;
	width: 200rpx;
	height: 250rpx;
}
.modal-title {
	font-size: 28rpx;
	text-align: center;
	font-weight: bold;
	color: #000;
}
.modal-content{
	font-size: 28rpx;
	color: #666;
	margin-top: 48rpx;
	margin-bottom: 32rpx;
}

.modal-header {
	display: flex;
	align-items: center;
}
.modal-header-container {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	position: relative;
	margin-right: 24rpx;
}
.modal-header-container view {
	font-size: 28rpx;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, .5);
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
.modal-header-container image {
	position: absolute;
	top: 0;
	left: 0;
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
}

.modal-sex {
	display: flex;
	align-items: center;
	justify-content: center;
}
.modal-sex-item {
	display: flex;
	align-items: center;
	flex-direction: column;
}
.modal-sex-item image {
	width: 116rpx;
	height: 114rpx;
	margin-bottom: 12rpx;
}
.modal-sex-item text {
	font-size: 24rpx;
	color: #333;
}
.modal-sex-item text.active {
	color: #FFB803;
}
.mr-108 {
	margin-right: 108rpx;
}
</style>
